/*main{

}*/
.LiveryMainInfo{
    width: 90%;
    margin: 40px auto;

    display: grid;
    grid-template-columns: 70% auto;
    grid-template-rows: 75px;
    grid-template-areas: "Title Game";}
    .LiveryTitle{
        grid-area: Title;
        width: fit-content;}
        .LiveryTitle > h1{font-size: 2.5em;}
        .LiveryTitle > h3{
            font-size: 1.25em;
            margin-top: 3px;
            font-weight: 100;
            color: var(--Persian-Red);}
    .LiveryGame{
        grid-area: Game;

        display: flex;
        flex-direction: row-reverse;
        width: auto; height: 75%;}
        .LogoGame{width: auto; height: 100%;}
            .LogoBigDisplay{display: block;}
            .LogoSmallDisplay{display: none;}


.Ribbon{margin-top: 25px; margin-bottom: 25px;}

.DescriptionLivery{
    display: block;

    width: 95%;    
    margin: 0px auto 25px;

    border-radius: 25px;}
    .DescriptionLivery > p{
        font-family: 'Valera Round', sans-serif; 
        font-size: 1em; 
        font-weight: 500; 
        line-height: 24px; 
        color: var(--Mine-Shaft);}
        .DescriptionLivery > p > b{
            color: var(--Buccaneer);} 
            .DescriptionLivery > ul, .DescriptionLivery > ol{
                margin: 20px; }
            .DescriptionLivery > ul > li, .DescriptionLivery > ol > li{
                color: var(--Mine-Shaft);}
    .DescriptionLivery > .HelpImage{
        width: 100%;
        margin: 5px auto;}
        .DescriptionLivery > .HelpImage > img{
            display: block;
            max-width: 1000px; min-width: 200px; width: 60%;
            margin: auto;}

.LiveryPictures{
    display: block;
    width: 90%;
    margin: auto;}
    .BigImgDisplayer{
        width: 100%; height: auto; 
        border-radius: 10px;
        overflow: hidden;
        margin: 20px auto;}
        .BigImgDisplayer > .BoxImage > img{
            width: auto; min-width: 400px; max-width: 100%;
            height: auto;
            transform: scale(105%);
            overflow: hidden;
            transition: 0.5s ease;
            cursor: pointer;} 
    .BigImgDisplayer > .BoxImage > img:hover{transform: scale(107%);}  
    .ImgDisplayer{    
        width: 100%;
        margin: auto;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;    }
        .ImgDisplayer > .BoxImage{    
            display: block;
            width: 225px;
            height: 135px;

            margin: 0px 15px 25px 15px;
            border-radius: 5px;
            box-shadow: 0.5px 1px 5px gray;

            overflow: hidden;
            transition: 0.5s ease;
            cursor: pointer;}
            .ImgDisplayer > .BoxImage > img{
                width: auto;
                height: 100%;
                transition: 0.5s ease;}
    .ImgDisplayer > .BoxImage:hover{transform: scale(105%); background-size: 110%;}    
    .ImgDisplayer > .BoxImage > img:hover{transform: scale(115%); background-size: 110%;}  


.LiveryDownload{display:block; width: 90%; margin: auto;}



.Summary{  
    display: block;

    width: 95%;    
    margin: 0px auto 25px;

    border-radius: 25px; }
    .Summary > ul{list-style: none;}
    .Summary > ul > li{
        width: 100%;
        }
        .Summary > ul > li > a{
            display: block;
            width: initial;

            font-family: 'Valera Round', sans-serif; 
            font-size: 1em; 
            font-weight: 500; 
            line-height: 24px; 
            color: var(--Mine-Shaft);    }
            .Summary > ul > li > a:hover{
                margin-left: 10px;
                font-size: 1.2em;
                color:  var(--Buccaneer);
                font-weight: 700; 
                transition: all 0.1s; }   

            .Summary > ul > li > ol{
                list-style: none;
                padding-left: 25px;}
                .Summary > ul > li > ol > li > a{
                    display: block;
                    width: initial;

                    font-family: 'Valera Round', sans-serif; 
                    font-size: 1em; 
                    font-weight: 500; 
                    line-height: 24px; 
                    color: var(--Mine-Shaft);    }
                .Summary > ul > li > ol > li > a:hover{
                    margin-left: 10px;
                    font-size: 1.2em;
                    color:  var(--Buccaneer);
                    font-weight: 700; 
                    transition: all 0.1s; }   

    section > h2{
        width: 98%;
        
        background-color: var(--Persian-Red);
        color: white;
        text-transform: uppercase;
        margin-top: 30px; margin-bottom: 10px;
        margin-left: auto; margin-right: auto;
        padding: 5px 10px;}                    
    section > .BlocTextProject > h3{
        text-align: center;
        text-decoration: underline;
        font-size: 1.5em;
        color: var(--Mine-Shaft);
        margin-top: 30px; margin-bottom: 10px;}
        section > .BlocTextProject > h4{
            width: 100%;
            background-color: var(--Persian-Red-LowOpacity);
            color: white;
            text-transform: uppercase;
            margin-top: 15px; margin-bottom: 5px;
            font-size: 1.15em;
            margin-left: -5px;
            padding: 5px 20px;}

.TitleLittlePart > p{
    text-align: center;
    margin-top: 25px;
    margin-bottom: 15px;
    font-size: 1.5em;
    text-decoration: underline;}

.BlocTextProject{ 
    display: block;

    width: 95%;    
    margin: 15px auto 15px;

    border-radius: 25px;}
    .BlocTextProject > p{
        font-family: 'Valera Round', sans-serif; 
        font-size: 1em; 
        font-weight: 500; 
        line-height: 24px; 
        color: var(--Mine-Shaft);}
        .BlocTextProject > p > b{
            color: var(--Buccaneer);} 
        .BlocTextProject > ul{
            margin-left: 20px;
            color: var(--Mine-Shaft);
            list-style:symbols(line);}    
            .BlocTextProject > ul > li{
                color: var(--Mine-Shaft);}
                .BlocTextProject > .ListPhrase > li{
                    font-family: 'Valera Round', sans-serif;}

.TableauList{
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: 100%;
    column-gap: 10px;
    justify-content: center;
    width: 95%;
    margin-left: auto;
    margin-right: auto; }
    .TableauList > div{
        display: block;
        width: 2px;
        height: inherit;
        content: ' ';
        margin-left: auto;
        margin-right: auto;
        background-color: var(--Mine-Shaft); }
    .TableauList > ul > h1{
        margin-bottom: -5px;
        font-family: 'Valera Round', sans-serif; 
        font-size: 1em; 
        font-weight: 500;
        text-align: center;
        line-height: 1.5em;
        color: var(--Mine-Shaft);}
    .UnderlineH1 > ul > h1{text-decoration: underline; font-weight: bold; font-size: 1.25em;  }        
        .TableauList > ul > li{
            margin: 12.5px;
            text-align: center;
            display: flex;
            flex-direction: column;
            font-family: 'Valera Round', sans-serif; 
            font-size: 1em; 
            color: var(--Mine-Shaft);
        }





.Author{
    display: block;
    width: 95%;
    margin-left: 25px; margin-right: auto;
    text-align: center;}  



.AuthorCard{
    list-style: none;

    width: 95%;
    margin: 25px auto;

    display: flex;
    flex-direction: row;
    
    justify-content: space-around; }
.AuthorCard > li{color: var(--Mine-Shaft); font-size: .85em;}
.AuthorCard > li > h4{
    color: var(--Buccaneer);
    font-size: 1.25em;}
.AuthorCard > li > img{
    width: 100px;
    
    pointer-events: none;

    border: 3px solid var(--Mine-Shaft);
    border-radius: 100%;}


.TextApproche{
    width: 95%;
    margin-left: auto; margin-right: auto;
    height: fit-content;
    margin-bottom: 25px; }
    .Text{
        text-align: justify; 

        font-family: 'Valera Round', sans-serif; 
        font-size: 1em; 
        font-weight: 500; 
        line-height: 24px; 
        color: var(--Mine-Shaft);
        
        display: block;
    
        width: 95%;    
        margin: 25px auto ;
    
        border-radius: 25px; }
    .FloatingIllustration{
        float: right;
        width: fit-content;
        height: fit-content;
        padding: 0px 0px 5px 20px; 

        display: flex;
        flex-direction: column;}
        .FloatingIllustration > .VisuelProjects{
            width: 500px;
            height: calc(500px  * 0.5625);
            border-radius: 25px;    }
        .FloatingIllustration > span, .SimpleIllustration > span, .DoubleIllustration > span{
                font-family: 'Valera Round', sans-serif; 
                font-size: 1em; 
                font-weight: 600; 
                font-style: italic;
                line-height: 24px; 
            
            
                border-radius: 25px;

            margin-left: auto;
            margin-right: auto;

            color: gray;    }



.SimpleIllustration{
    margin: 0 auto 25px auto;
    width: fit-content;
    height: fit-content;

    display: flex;
    flex-direction: column;
    align-items: center;}  
    .SimpleIllustration > .VisuelProjects{
        width: fit-content;
        height: fit-content;
        max-width: 600px;
        max-height: calc(600px * 0.5625);
        overflow: hidden;
        border-radius: 25px;    }
    .SimpleIllustration > .VisuelProjects > img{
        display: block;
    /*    width: inherit;
        height: inherit;*/
        width: 100%;
        
        cursor: pointer;
        transition: all 0.1s ease-in-out;}
        .SimpleIllustration > .VisuelProjects > img:hover{
            transform: scale(1.1);    }
    .SimpleIllustration > .Word4Corner{
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;}
        .SimpleIllustration > .Word4Corner > p{
            font-family: 'Valera Round', sans-serif; 
            font-size: 1em; 
            font-weight: 500; 
            line-height: 24px; 
            color: var(--Mine-Shaft);}
            .SimpleIllustration > .Word4Corner > p > b{
                color: var(--Buccaneer);} 
        

.DoubleIllustration{
    width: 95%;
    margin: 25px auto 0 auto ;

    display: flex;
    flex-direction: row;
    justify-content: space-around;}
    .DoubleIllustration > .SimpleIllustration > .VisuelProjects{
        width: 100%;
        max-width: 470px;
        max-height: calc(470px  * 0.5625); }
    .SpecialDoubleIllustration > .SimpleIllustration > .VisuelProjects{
        width: 100%;
        height: 100%;
        max-width: 470px;
        max-height: 750px; }


.ProjetTextAndImage {width: 85%;  margin: 15px auto 0px; display: grid;}
    .RowType1{       
        display: grid;
        grid-template-areas: 
        'PremierPara PremierImg';  
        grid-template-columns: 45% 52%; 
        align-items: center;
        justify-content: space-between; }
    .RowType2{
        display: grid;
        grid-template-areas: 
        'SecondImg SecondPara';  
        grid-template-columns: 52% 45%; 
        align-items: center;
        justify-content: space-between;    }
    .RowType3{
        display: grid;
        grid-template-areas: 
        'ThirdPara ThirdImg';  
        grid-template-columns: 48% 52%; 
        align-items: center;
        justify-content: space-between;    }
    .RowType4{
        display: grid;
        grid-template-areas: 
        "FourthOneImg FourthTwoImg"
        "FourthOneImg FourthThreeImg";
        grid-template-rows: auto;
        grid-template-columns: 60% 40%;

        align-items: center;
        justify-content: center;}
        .TextWithSmallImage > .RowType1{grid-template-columns: 75% 25%;}
        .TextWithSmallImage > .RowType2{grid-template-columns: 25% 75%;}
.ProjetTextAndImage > p{
    width:auto;
    height: max-content;        
    text-align: left;
    font-family: 'Valera Round', sans-serif; 
    font-size: 1em; font-weight: 500; 
    line-height: 24px; color: var(--Mine-Shaft); }
    .ProjetTextAndImage > p > b{
        color: var(--Buccaneer);} 
        .P1{grid-area: PremierPara ; margin-left: 0;}
        .P2{grid-area: SecondPara ; margin-right: 0;}
        .P3{grid-area: ThirdPara ; margin-right: 0;}

    .ProjetTextAndImage > .SimpleIllustration{margin: auto;}
    .ImageExpl{width:auto; max-width: 450px; border-radius: 25px; margin-left: auto; margin-right: auto;}
        .RowType1 > .SimpleIllustration, .I1{grid-area: PremierImg ; margin-right: auto; margin-left: auto;}
        .RowType2 > .SimpleIllustration, .I2{grid-area: SecondImg ; margin-left: auto; margin-right: auto;}
        .I3{grid-area: ThirdImg ; }       
            .RowType3 > .SimpleIllustration > .I3-1{grid-area: ThirdOneImg ; transform: scale(0.9) translate(-5%, 5.55%);}
            .RowType3 > .SimpleIllustration > .I3-2{grid-area: ThirdTwoImg ; transform: scale(0.9)translate(5%, -5.55%); margin-bottom: -5.55%;}
                .RowType3 > .NonClickable > .I3-1{transform: translate(-7.5%, 20%);}
                .RowType3 > .NonClickable > .I3-2{transform: translate(0,25%);}
        .I4-1{grid-area: FourthOneImg ; }
        .I4-2{grid-area: FourthTwoImg ;}
        .I4-3{grid-area: FourthThreeImg ; }

.NonClickable{pointer-events: none;}

 
.SimpleCard{
    width: 85%;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-content: space-between;
    margin: 25px auto 50px; }

    .SimpleCard > section > i{
        width: 100%;
        text-align: center;
        font-size: 35px;
        margin-bottom: 5px;
        color: var(--Shark);    }
    .SimpleCard > section > h2{
        font-weight: 500;
        font-size: 1.2em;
        text-align: center;
        margin-bottom: 5px;    }
    .SimpleCard > section > p{
        text-align: center;
        font-family: 'Valera Round', sans-serif;
        font-size: 1em;
        font-weight: 500;
        line-height: 24px;
        color: var(--Mine-Shaft); }


.TableGridDC{
    width: 90%;
    margin-left: auto; margin-right: auto;
    grid-row-gap: 25px;
    display: grid;
    grid-template-columns: 50% 50%;
    margin-bottom: 25px ;    }
.TableGridSC{
    width: 95%;
    margin-left: auto; margin-right: auto;
    grid-row-gap: 25px;
    display: grid;
    grid-template-columns: 100%;
    margin-bottom: 25px ;   }

.TableInformation{
    margin-left: auto; margin-right: auto;
    table-layout: fixed;
    width: 90%;
    border-collapse: collapse;
    border-radius: 10px;
    overflow: hidden;
    background-color: var(--Persian-Red);
    /*background-color: var(--White);*/
    box-shadow: 2px 3px 20px gray; }
    .TableInformation > caption{
        background-color: aqua;
        caption-side: top;
        box-shadow: -5px 3px 6px gray;
        font-size: 20px;
        background-color: var(--Persian-Red);
        color: var(--White);      
        display: flex;
        flex-direction: row; }
        .TableInformation > caption > i{
            font-size: 28px;
            line-height: 30px;
            padding: 10px 15px;  }
            .TableInformation > caption > h2{
                line-height: 30px;
                padding: 10px 15px 10px 0;
                font-weight: 500;
                font-family: 'PoetsenOne', sans-serif;  }        
    .TableInformation > thead{
        box-shadow: 0px 3px 6px gray;
        font-size: 20px;
        background-color: var(--Persian-Red);
        color: var(--White); }
        .TableInformation > thead > tr{width: 100%;}
        .TableInformation > thead > tr > th{
            width: 100%;
            display: flex;
            flex-direction: row; }
        .TableInformation > tbody > tr > td{
            background-color: var(--White);
            padding: 10px 25px;
            text-align: left;}
        .TableInformation > .TableTBCenter > tr > td{
            padding: 10px 5px;
            text-align: center; }
        .TableInformation > tbody > .TableSousCat > td{
            width: auto;
            line-height: 30px;
            padding: 10px 0px;
            font-weight: 200;
            font-family: 'PoetsenOne', sans-serif;  
            text-align: center;
            
            font-size: 18px;
            background-color: var(--Buccaneer);
            color: var(--White); }              






@media all and (max-width: 768px)
{
    .LogoBigDisplay{display: none;}
    .LogoSmallDisplay{display: block; height: 75%; margin-top: 5px; margin-right: 5px;}

    .LiveryDownload{display:none; }

    .ProjectPresentation > h1 {
        padding-top: 35px; 
        font-size: 2em;   }
        .ProjectPresentation > .DateProject{    margin-right: 10px;}

    .ProjectPresentation > iframe, .ProjectPresentation > .ImgProjetBox, .ProjectPresentation > section > iframe, .ProjectDetail > section >section > iframe{width: 336px; height: 189px;}

    .DescriptionProject{    width: 90%;    }

    .SmallProject{  grid-template-areas: "Detail" "Images";}
    
    .Author > h2 { font-size: 1.25em;}
    .AuthorCard{
        list-style: none;
    
        width: 95%;
        margin: 25px auto;
    
        display: flex;
        flex-direction: row;
        
        justify-content: space-around; }
    .AuthorCard > li{color: var(--Mine-Shaft); font-size: .6em;}
    .AuthorCard > li > h4{
        color: var(--Buccaneer);
        font-size: 1.75em;}
    .AuthorCard > li > img{
        width: 75px;
        
        pointer-events: none;
    
        border: 3px solid var(--Mine-Shaft);
        border-radius: 100%;}


    /* Info du jeu à afficher correctemement */
    .PartDroite{
        display: block;
        width: 100%;
        overflow-x: scroll;        
        margin-bottom: -25px;   }
    .PartDroite > .ImgDisplayer{
        display: block;
        white-space: nowrap;
        overflow-x: scroll;   
        
        margin-left: 10px;
        margin-right: 10px; }
        .PartDroite > .ImgDisplayer::-webkit-scrollbar{width: 0;}

        .PartDroite > .ImgDisplayer > .BoxImage{
            display: inline-block;
            
            width: 320px;        
            margin: 0 0 15px auto; 
    

            overflow: hidden; 
            transition: all 0.25s ease-in-out;  }


    .SimpleIllustration > .VisuelProjects{
       /* width: 350px;
        height: calc(350px * 0.5625);*/
        max-width: 375px;
        width: auto;
        height: fit-content;
        overflow: hidden;
        border-radius: 25px;    }

    .DoubleIllustration{flex-direction: column;}
        .DoubleIllustration > .SimpleIllustration > .VisuelProjects{
           /* width: 350px;
            height: calc(350px  * 0.5625);*/
            max-width: 450px;
            width: auto;
            height: fit-content; }


    .ProjetTextAndImage {width: 85%;  margin: 15px auto 0px; display: grid;}
        .RowType1{       
            display: grid;
            grid-template-areas: 
            'PremierPara'
            'PremierImg';  
            grid-template-columns: 100%; 
            grid-gap: 5px;
            align-items: center;
            justify-content: space-between; }
        .RowType2{
            display: grid;
            grid-template-areas: 
            'SecondPara'
            'SecondImg';  
            grid-template-columns: 100%; 
            grid-gap: 5px;
            align-items: center;
            justify-content: space-between;    }
        .RowType3{
            display: grid;
            grid-template-areas: 
            'ThirdPara' 
            'ThirdImg';  
            grid-template-columns: 100%; 
            grid-gap: 5px;
            align-items: center;
            justify-content: space-between;    }
        .RowType4{
            display: grid;
            grid-template-areas: 
            "FourthOneImg FourthOneImg"
            "FourthTwoImg FourthThreeImg";
            grid-template-rows: auto;
            grid-template-columns: 50% 50%;
            grid-gap: 5px;
            align-items: center;
            justify-content: start;}
            .TextWithSmallImage > .RowType1{grid-template-columns: 100%;}
            .TextWithSmallImage > .RowType2{grid-template-columns: 100%;}


        .ProjetTextAndImage > .SimpleIllustration{margin: auto;}
            .ProjetTextAndImage > .SimpleIllustration > .VisuelProjects{height: auto;}
        .ImageExpl{width: auto; height: 100%;}
        .NonClickable > .VisuelProjects > .ImageExpl{width:auto; max-width: 150px; border-radius: 25px;  }
            .RowType1 > .SimpleIllustration, .I1{grid-area: PremierImg ; margin-right: auto; margin-left: auto;}
            .RowType2 > .SimpleIllustration, .I2{grid-area: SecondImg ; margin-left: auto; margin-right: auto;}
            .I3{grid-area: ThirdImg ; }       
                .RowType3 > .SimpleIllustration > .I3-1{grid-area: ThirdOneImg ; transform: scale(0.9) translate(-5%, 5.55%);}
                .RowType3 > .SimpleIllustration > .I3-2{grid-area: ThirdTwoImg ; transform: scale(0.9)translate(5%, -5.55%); margin-bottom: -5.55%;}
                    .RowType3 > .NonClickable{
                        width: 100%;
                        display: grid;
                        grid-template-areas: 
                        'ThirdOneImg ThirdTwoImg';
                        grid-template-rows: auto;
                        grid-template-columns: 50% 50%;
                        grid-gap: 5px;
                        align-items: center;
                        justify-content: center;}
                        .RowType3 > .NonClickable > .I3-1{width: auto; transform: translate(0,0);}
                        .RowType3 > .NonClickable > .I3-2{width:auto; transform:translate(0,0); margin-bottom: 0%;}

                .I4-1{grid-area: FourthOneImg ; }
            .I4-2{grid-area: FourthTwoImg ; width:95%; }
            .I4-3{grid-area: FourthThreeImg ; width:95%; }
                .I4-2 > .VisuelProjects > .ImageExpl{margin: auto; padding: 0; width: 100%; height: auto;}
                .I4-3 > .VisuelProjects > .ImageExpl{margin: auto; padding: 0; width: 100%; height: auto;}


        .TableGridDC{
            width: 95%;
            grid-template-columns: 100%;    }
        .TableGridSC{
            width: 95%;
            margin-left: auto; margin-right: auto;
            grid-row-gap: 25px;
            display: grid;
            grid-template-columns: 100%;
            margin-bottom: 25px ;   }


            .TableInformation > caption{
                background-color: aqua;
                caption-side: top;
                box-shadow: -5px 3px 6px gray;
                font-size: 15px;
                background-color: var(--Persian-Red);
                color: var(--White);      
                display: flex;
                flex-direction: row; }
                .TableInformation > caption > i{
                    font-size: 25px;
                    line-height: 25px;
                    padding: 10px 15px;  }
                    .TableInformation > caption > h2{
                        line-height: 25px;
                        padding: 10px 15px 10px 0;
                        font-weight: 500;
                        font-family: 'PoetsenOne', sans-serif;  }    





}